import { VideoPlayer } from "./video-player.js";
import { registerGamepadEvents, registerKeyboardEvents, registerMouseEvents, sendClickEvent } from "./register-events.js";
import { getServerConfig } from "./config.js";

setup();

let playButton;
let videoPlayer;
let useWebSocket;

window.document.oncontextmenu = function () {
    return false;     // cancel default menu
};

window.addEventListener('resize', function () {
    videoPlayer.resizeVideo();
}, true);

window.addEventListener('beforeunload', async () => {
    await videoPlayer.stop();
}, true);

async function setup() {
    const res = await getServerConfig();
    useWebSocket = true;    //res.useWebSocket;
    console.log('setup: '+useWebSocket);
    showWarningIfNeeded(res.startupMode);
    showPlayButton();
}

function showWarningIfNeeded(startupMode) {
    const warningDiv = document.getElementById("warning");
    if (startupMode == "private") {
        warningDiv.innerHTML = "<h4>Warning</h4> This sample is not working on Private Mode.";
        warningDiv.hidden = false;
    }
}

function showPlayButton() {
    if (!document.getElementById('playButton')) {
        let elementPlayButton = document.createElement('img');
        elementPlayButton.id = 'playButton';
        elementPlayButton.src = 'images/Play.png';
        elementPlayButton.alt = 'Start Streaming';
        playButton = document.getElementById('player').appendChild(elementPlayButton);
        playButton.addEventListener('click', onClickPlayButton);
    }
}

function onClickPlayButton() {

    playButton.style.display = 'none';

    const playerDiv = document.getElementById('player');

    // add video player
    const elementVideo = document.createElement('video');
    elementVideo.id = 'Video';
    elementVideo.style.touchAction = 'none';
    playerDiv.appendChild(elementVideo);

    // add video thumbnail
    const elementVideoThumb = document.createElement('video');
    elementVideoThumb.id = 'VideoThumbnail';
    elementVideoThumb.style.touchAction = 'none';
    playerDiv.appendChild(elementVideoThumb);

    setupVideoPlayer([elementVideo, elementVideoThumb]).then(value => videoPlayer = value);

    // add blue button
    const elementBlueButton = document.createElement('button');
    elementBlueButton.id = "blueButton";
    elementBlueButton.innerHTML = "Light on";
    playerDiv.appendChild(elementBlueButton);
    elementBlueButton.addEventListener("click", function () {
        sendClickEvent(videoPlayer, 1);
    });

    // add green button
    const elementGreenButton = document.createElement('button');
    elementGreenButton.id = "greenButton";
    elementGreenButton.innerHTML = "Light off";
    playerDiv.appendChild(elementGreenButton);
    elementGreenButton.addEventListener("click", function () {
        sendClickEvent(videoPlayer, 2);
    });

    // add orange button
    const elementOrangeButton = document.createElement('button');
    elementOrangeButton.id = "orangeButton";
    elementOrangeButton.innerHTML = "Play audio";
    playerDiv.appendChild(elementOrangeButton);
    elementOrangeButton.addEventListener("click", function () {
        sendClickEvent(videoPlayer, 3);
    });

    // add fullscreen button
    const elementFullscreenButton = document.createElement('img');
    elementFullscreenButton.id = 'fullscreenButton';
    elementFullscreenButton.src = 'images/FullScreen.png';
    playerDiv.appendChild(elementFullscreenButton);
    elementFullscreenButton.addEventListener("click", function () {
        if (!document.fullscreenElement || !document.webkitFullscreenElement) {
            if (document.documentElement.requestFullscreen) {
                document.documentElement.requestFullscreen();
            }
            else if (document.documentElement.webkitRequestFullscreen) {
                document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
            } else {
                if (playerDiv.style.position == "absolute") {
                    playerDiv.style.position = "relative";
                } else {
                    playerDiv.style.position = "absolute";
                }
            }
        }
    });
    document.addEventListener('webkitfullscreenchange', onFullscreenChange);
    document.addEventListener('fullscreenchange', onFullscreenChange);

    function onFullscreenChange() {
        if (document.webkitFullscreenElement || document.fullscreenElement) {
            playerDiv.style.position = "absolute";
            elementFullscreenButton.style.display = 'none';
        }
        else {
            playerDiv.style.position = "relative";
            elementFullscreenButton.style.display = 'block';
        }
    }
}

async function setupVideoPlayer(elements) {
    const videoPlayer = new VideoPlayer(elements);
    await videoPlayer.setupConnection(useWebSocket);

    videoPlayer.ondisconnect = onDisconnect;
    registerGamepadEvents(videoPlayer);
    registerKeyboardEvents(videoPlayer);
    registerMouseEvents(videoPlayer, elements[0]);

    return videoPlayer;
}

function onDisconnect() {
    const playerDiv = document.getElementById('player');
    clearChildren(playerDiv);
    videoPlayer.stop();
    videoPlayer = null;
    showPlayButton();
}

function clearChildren(element) {
    while (element.firstChild) {
        element.removeChild(element.firstChild);
    }
}
